<template lang="html">
  <view class='popup' @touchmove.prevent v-if="popup.isComment">
     <view class='comment' @touchmove.prevent>
        <view class="stars">
            <image
             @click='starRecord'
              v-for="(item,index) in 5"
              :data-id='index+1' 
              :key="index"
              :src="index+1<=starNum ? '../static/images/icon_star_active.png': '../static/images/icon_star.png'"
              mode="scaleToFill"
              lazy-load="false">
            </image>
        </view>
        <view class="content">
             <textarea
              maxlength="100"
              value=""
              placeholder-class="placeholder"
              placeholder="顾问还满意吗？说说他/她的优点或美中不足吧"
              />
        </view>
        <view class="submit-btn" @click="submitFn">
            提交
        </view>
    </view>
  <view class='popup popup-mask' @touchmove.prevent v-if="popup.isComment" @click="closeModule"></view>
  </view>
</template>

<script>
import Vue from "vue"
export default {
  props:["popup"],
  data() {
    return {
      starNum:0
    };
  },
  created() {},
 
   deactivated(){
      this.popup.isComment = false;
  },
  methods: {
    //关闭模板
    closeModule() {
      let _that = this;
      _that.popup.isComment = false;
    },
    //星级评价
    starRecord(e){
      this.starNum=e.currentTarget.dataset.id
    },
    //提交按钮
    submitFn(){
      if(this.starNum==0){
           Vue.showCustomToast("请选择星星评价")
           return
      }
      this.closeModule()
    }
  }
};
</script>

<style lang="less">
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  .popup-mask{
     background: rgba(0, 0, 0, 0.6);
      z-index: 1000;
  }
  .comment {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    height: 650upx;
    z-index: 1100;
    margin: -300upx auto 0;
    width: 600upx;
    background: #ffffff;
    border-radius: 10upx;
    .stars {
      display: flex;
      margin: 0 auto;
      padding: 80upx 152upx;
      image {
        width: 37upx;
        height: 34upx;
        margin-left: 28upx;
      }
    }
    .submit-btn {
      width: 360upx;
      height: 88upx;
      background: rgba(35, 106, 246, 1);
      border-radius: 10upx;
      text-align: center;
      line-height: 88upx;
      color: #ffffff;
      margin: 72upx auto 0;
    }
    .content{
       width: 480upx;
       height: 200upx;
       margin: 0 auto;
    }
    textarea {
      width:100%;
      height:100%;
      background: rgba(241, 246, 255, 1);
      border: 1px solid rgba(96, 150, 255, 1);
      border-radius: 10upx;
      padding: 38upx 45upx 32upx 38upx;
      font-size: 30upx;
    }
     .placeholder{
      font-size: 30upx;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(187, 187, 187, 1);
      line-height: 36upx;
    }
  }
}
</style>
